<template>
    <!-- 表单填写 -->
    <view class="xinguan-view">
        <view class="xinguan-flex">
            <text>姓名</text>
            <input placeholder="请输入姓名" v-model="insertData.name" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>身份证</text>
            <input placeholder="请输入身份证" v-model="insertData.id_card" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>手机号</text>
            <input placeholder="请输入手机号" v-model="insertData.phone" type="number" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>现居地址</text>
            <picker mode="region" class="flex-left" @change="changeRegion">
                <view>
                    <!--  -->
                    <text>{{ insertData.address == '' ? '请选择现居地址' : insertData.address }}</text>
                    <image src="/static/other/gengduo.svg"></image>
                </view>
            </picker>
        </view>
        <view class="xinguan-flex">
            <text>现居详细地址</text>
            <input placeholder="请输入现居详细地址" v-model="insertData.de_address" placeholder-class="input-style" />
        </view>
        <view class="xinguan-flex">
            <text>疫苗人群分类</text>
            <picker mode="selector" class="flex-left" :range="rangeData" @change="changeSelector">
                <view>
                    <text>{{ insertData.crowd_sort == '' ? '请选择疫苗人群分类' : insertData.crowd_sort }}</text>
                    <image src="/static/other/gengduo.svg"></image>
                </view>
            </picker>
        </view>
    </view>
    <!-- 预约时间 -->
    <view>
        <!-- 医院地址 -->
        <view class="reserve-address">
            <text class="reserve-name">{{ newapptime.Hospital }}</text>
            <text class="reserve-road">{{ newapptime.address }}</text>
            <view class="reserve-title">
                <text v-for='(item, index) in newapptime.company' :key="index">{{ item }}</text>
            </view>
        </view>
        <!-- 星期 -->
        <view class="Week">
            <view class="Week-flex" v-for="(item, index) in newapptime.week" @click="ChooseWeek(index, item.date)">
                <view :class="['Week-style', 'Week-sup', weekIndex == index ? 'checkstyle' : '']">
                    <text>{{ item.day }}</text>
                    <text>{{ item.date }}</text>
                    <text>{{ item.Have }}</text>
                </view>
            </view>
        </view>
        <!-- 时段 -->
        <view class="period-view" v-for="(item, index) in newapptime.lasting" :key="index">
            <text class="period-title">{{ item.period }}</text>
            <view class="Week-flex">
                <block v-for="(m, i) in item.time" :key="i">
                    <view :class="['Week-style', 'Week-Down', timeIndex == index + '-' + i ? 'checkstyle' : '']"
                        @click="ChooseTime(index + '-' + i, item.period, m.start_time, m.end_time, m.when)">
                        <text>{{ m.start_time }}--{{ m.end_time }}</text>
                        <text>剩余{{ m.over }}</text>
                    </view>
                </block>
            </view>
        </view>
    </view>
    <!-- 底部按钮 -->
    <view style="height:300rpx"></view>
    <view class="submit">
        <text @click="Cancel">取消预约</text>
        <text @click="Submit">提交预约</text>
    </view>
</template>
    
<script setup lang="ts">
// 1.引入基础模块
import { ref, onMounted, reactive, toRefs } from 'vue'
import { reqNewapptime, reqRescovid } from "@/serve/api"
import { newapptimeType, rescovidType } from "@/types/index"
import { showload, hideload } from "@/utils/tip"

// 2.定义页面响应式数据
let pageData = reactive({
    newapptime: {} as newapptimeType,//预约时间数据
    weekIndex: -1,//日期默认选中下标
    timeIndex: '-1',//时段默认选中下标
    insertData: {
        name: "",
        id_card: "",
        phone: "",
        address: "",
        de_address: "",
        crowd_sort: "",
        date: "",
        period: "",
        reserve_time: "",
        when: 0
    } as rescovidType,
    rangeData: ['医疗卫生人员', '卫生系统内工作的其他人员', '因公出国人员',
        '对外劳务派遣人员', '留学生', '因私出国人员', '海关边检人员', '公安系统,消防人员',
        '党政机关,事业单位人员', '社区工作者', '教育工作者', '小学和中学学生', '其他人员'
    ]
})

// 3.批量解构页面响应式数据
let { newapptime, weekIndex, timeIndex, insertData, rangeData } = toRefs(pageData)

// 4.实现日期切换
function ChooseWeek(index: number, date: string) {
    pageData.weekIndex = index
    pageData.insertData.date = date
}

// 5.实现时间段切换
function ChooseTime(index: string, period: string, start_time: string, end_time: string, when: number) {
    pageData.timeIndex = index
    pageData.insertData.period = period//上午 下午
    pageData.insertData.reserve_time = start_time + "--" + end_time//09:00--12:00
    pageData.insertData.when = when//下标
}

// 6.监听用户居住地址变化
function changeRegion(event: { detail: { value: [] } }) {
    // console.log(event)
    pageData.insertData.address = event.detail.value.join(',')
}
// 7.监听接种人群变化
function changeSelector(event: any) {
    console.log(event)
    let index = event.detail.value * 1
    pageData.insertData.crowd_sort = pageData.rangeData[index]
}

// 8.提交新冠疫苗预约数据
async function Submit() {
    // 捕获异常语句
    try {
        // showload("数据提交中...")
        // await reqRescovid(pageData.insertData)
        // hideload()
        setTimeout(() => { uni.navigateTo({ url: "../myorder/newVaccine/newVaccine" }) }, 500)
    } catch (error) {
        console.log('异常是：', error)
    }
}

// 9.取消预约
function Cancel() {
    uni.navigateBack({ delta: 1 })
}


onMounted(async () => {
    // 获取应用医院、时间数据
    let res = await reqNewapptime()
    pageData.newapptime = res.data[0]
    console.log(res.data[0].lasting)
})




</script>
    
<style>
/* 表单提交 */
@import url('../../common-style/form.css');

page {
    background-color: #f7f7f7;
}

/* 预约地址 */
.reserve-address {
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
}

.reserve-address text {
    display: block;
}

.reserve-name {
    font-weight: bold;
}

.reserve-road {
    padding: 20rpx 0;
}

.reserve-title {
    display: flex;
    align-items: center;
}

.reserve-title text {
    background-color: #f7f7f7;
    padding: 5rpx 20rpx;
    font-size: 25rpx;
    margin-right: 10rpx;
}

.Week {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 20rpx;
    display: flex;
    align-items: center;
}

.Week-flex {
    display: flex;
}

.Week-style {
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.Week-style text {
    padding: 3rpx;
}

.Week-sup {
    width: 150rpx;
}

.period-view {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 20rpx;
}

.period-title {
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.Week-Down {
    width: 200rpx;
}

/* 选中加上样式 */
.checkstyle {
    background-color: #2c76ef !important;
    color: #ffffff !important;
}
</style>